<template>
  <div class="page">
    <div class="left">
      <div class="all">
        <h1>本周工作时长</h1>
        <div class="bar">
          <div class="line" :style="{width:width}"></div>
          <div class="p">
            {{ process }}
          </div>
        </div>
        <div class="leftover">
          {{ leftover }}
        </div>
      </div>
      <div class="to">
        <h1>本日工作时长</h1>
        <div class="bar">
          <div class="line" :style="{width:toWidth}"></div>
          <div class="p">
            {{ toProcess }}
          </div>
        </div>
        <div class="leftover">
          {{ toLeftover }}
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-body">
        <a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
      </div>
    </div>

    <div class="mask" :style="{display:mask?'flex':'none'}">
      <div class="fireworks" style="left: 15%; top: 5%;"></div>
      <div class="fireworks" style="right: 30%; top: 13%; animation-delay: -0.4s;"></div>
      <div class="fireworks" style="left: 5%; top: 23%; animation-delay: -1.7s;"></div>
      <div class="fireworks" style="right: 45%; top: 8%; animation-delay: -3.1s;"></div>
      <img
          v-if="seconds<=0"
          src=""
          alt="">
      <div class="seconds ani" v-else-if="seconds<=3">
        {{seconds}}
      </div>
      <div class="seconds" v-else>
        {{seconds}}
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
import {ref} from "vue";


const value = ref();
const onPanelChange = (value, mode) => {
  console.log(value, mode);
};
// 周一日子
const list = [
  [moment('2023-01-28'), moment('2023-02-03')],
  [moment('2023-04-03'), moment('2023-04-04')],
  [moment('2023-04-06'), moment('2023-04-07')],
  [moment('2023-04-06'), moment('2023-04-07')],
  [moment('2023-04-23'), moment('2023-04-28')],
  [moment('2023-05-04'), moment('2023-05-06')],
  [moment('2023-06-19'), moment('2023-06-21')],
  [moment('2023-06-25'), moment('2023-06-30')],
  [moment('2023-09-25'), moment('2023-09-28')],
  [moment('2023-10-07'), moment('2023-10-13')],
]
// 本周工作天数
const today = moment()
let week;
for (let i in list) {
  if (list[i][0].isBefore(today) && list[i][1].isAfter(today) || list[i][0].isSame(today, 'day') || list[i][1].isSame(today, 'day')) {
    week = list[i];
  }
}
if (!week) {
  week = []
  const weekOfday = today.format('E');//计算今天是这周第几天
  week[0] = moment().subtract(weekOfday - 1, 'days');//周一日期
  week[1] = moment().add(5 - weekOfday, 'days');//周日日期
}
const workDayForWeek = week[1].diff(week[0], 'day') + 1
// 每天毫秒数 8:35 到 17:05
const millisecondForDay = (8 * 60 + 30) * 60 * 1000
const allTime = workDayForWeek * millisecondForDay
const process = ref('')
const toProcess = ref('')
const width = ref(0)
const toWidth = ref(0)
const leftover = ref('')
const toLeftover = ref('')
const mask = ref(false)
const seconds = ref(60)

const getProcess = ()=> {
  // 当前时间
  let now = moment()
  let h = now.hour()
  let m = now.minute()
  if (8.35 > (h + m / 100)) {
    now = moment().hours(8).minutes(35).seconds(0)
  } else if (17.05 < (h + m / 100)) {
    now = moment().hours(17).minutes(5).seconds(0)
  }
  // 已经上班的时间
  const today = now - moment().hours(8).minutes(35).seconds(0)
  // 已经上了几天班
  const day = now.diff(week[0], 'day')
  // 都加一起
  const last = day * millisecondForDay + today

  if(allTime - last <= 60000){
    mask.value = true;
    seconds.value = parseInt((allTime - last)/1000)
  }
  if(millisecondForDay - today <=60000){
    mask.value = true;
    seconds.value = parseInt((millisecondForDay - today)/1000)
  }
  // 算个百分比
  const number = ((last / allTime) * 10000 / 100).toFixed(3) + '%'
  process.value = number
  width.value = number
  leftover.value = '距离结束还有' + (workDayForWeek - day - 1) + '天'
  const toNumber = ((today / millisecondForDay) * 10000 / 100).toFixed(3) + '%'
  toProcess.value = toNumber
  toWidth.value = toNumber
  toLeftover.value = '距离结束还有' + (8-(h-8)) + '小时'
}

getProcess()
setInterval(() => {
  // 8:30之前和17:05之后停滞
  getProcess()
}, 1000)

</script>

<style scoped lang="less">

.page {
  background-image: url('https://images5.alphacoders.com/570/570264.jpg');
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .left {
    flex: 1;
    height: 600px;
    .all{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }
    .to{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
    }

    h1 {
      text-align: center;
      color: #fff;
      padding-top: 100px;
    }

    .bar {
      height: 50px;
      border: 1px solid #fff;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      background-color: #fff;
      width: 30vw;
      /*margin-left: 20vw;*/
      /* filter: blur(2px); */
    }

    .leftover {
      color: #f5f6f7;
      margin-top: 10px;
      font-size: 20px;
    }

    .p {
      position: absolute;
      width: 100%;
      height: 50px;
      text-align: center;
      font-size: 25px;
      top: 0;
      left: 0;
      line-height: 50px;
      color: #d00;
    }

    .line {
      height: 50px;
      background-color: greenyellow
    }
  }

  .right {
    flex: 1;
    margin-left: 50px;

    .right-body {
      padding: 20px;
      background-color: #fff;
      width: 535px;
    }
  }
}


.mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, .7);
  overflow: hidden;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  .seconds{
    font-size: 150px;
    color: #fff;
  }
  .ani{
    animation-name: toscale;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@keyframes toscale {
  0% {
    transform: scale(.7);
  }
  100%{
    transform: scale(1.3);
  }
}
.mask img {
  width: 20vw;
}

.fireworks {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #FFEFAD;
  /*     padding-bottom: 100px; */
  -webkit-mask: url('https://imgservices-1252317822.image.myqcloud.com/image/081320210201435/e9951400.png') right top no-repeat;
  -webkit-mask-size: auto 300px;
  animation: fireworks 2s steps(24) infinite, random 8s steps(1) infinite, random_color 1s infinite;
}

@keyframes fireworks {
  0% {
    -webkit-mask-position: 0%;
  }
  50%,
  100% {
    -webkit-mask-position: 100% 100%;
  }
}

@keyframes random {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(200%, 50%) scale(0.8);
  }
  50% {
    transform: translate(80%, 80%) scale(1.2);
  }
  75% {
    transform: translate(20%, 60%) scale(0.65);
  }
}

@keyframes random_color {
  0% {
    background-color: #FFEFAD;
  }
  25% {
    background-color: #ffadad;
  }
  50% {
    background-color: #aeadff;
  }
  75% {
    background-color: #adffd9;
  }
}

@media screen and (prefers-reduced-motion) {
  /* 禁用不必要的动画 */
  .fireworks {
    animation: none;
  }
}
:deep(.ant-picker-calendar-date-content){
  height: 50px!important;
}
</style>
